2017 iT 邦幫忙鐵人賽

DAY 4

Modern Web

30 天精通 RxJS系列第 4 篇

30 天精通 RxJS (03)： Functional Programming 通用函式

2017鐵人賽 rxjs javascript functional observable

JerryHong

2016-12-19 23:04:41

36112 瀏覽

分享至

本篇文章搬家囉！這裡不再回覆留言，請移至 https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-03/

30 天精通 RxJS (03)： Functional Programming 通用函式

了解 Functional Programming 的通用函式，能讓我們寫出更簡潔的程式碼，也能幫助我們學習 RxJS。

這是【30天精通 RxJS】的 03 篇，如果還沒看過 02 篇可以往這邊走：
30 天精通 RxJS (02)： Functional Programming 基本觀念

讀者可能會很好奇，我們的主題是 RxJS 為什麼要特別講 Functional Programming 的通用函式呢？實際上，RxJS 核心的 Observable 操作觀念跟 FP 的陣列操作是極為相近的，只學會以下幾個基本的方法跟觀念後，會讓我們之後上手 Observable 簡單很多！

今天的程式碼比較多，大家可以直接看影片！

ForEach

forEach 是 JavaScript 在 ES5 後，原生就有支援的方法。

原本我們可能要透過 for loop 取出陣列中的每一個元素

var arr = ['Jerry', 'Anna'];

for(var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

現在可以直接透過陣列的 forEach 取出每一個元素。

var arr = ['Jerry', 'Anna'];

arr.forEach(item => console.log(item));

forEach 是 FP 操作陣列的基本方法，我們可以用這個方法來實作下面三個我們今天要講的重點分別為 map, filter, concatAll。

Map

試著把 newCourseList 每個元素的 { id, title } 塞到新的陣列 idAndTitlePairs

var newCourseList = [
	{
		"id": 511021,
		"title": "React for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 5
	},
	{
		"id": 511022,
		"title": "Vue2 for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 5
	},
	{
		"id": 511023,
		"title": "Angular2 for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 5
	},
	{
		"id": 511024,
		"title": "Webpack for Beginners",
		"coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
		"rating": 4
	}
], idAndTitle = [];

newCourseList.forEach((course) => {
	idAndTitle.push({ id: course.id, title: course.title });
});

雖然我們成功的把 newCourseList 轉成 idAndTitlePairs，但這樣的寫法還是顯得有點太複雜了，我們可以用更抽象化的方式來完成。

上面我們練習到 newCourseList 轉換成一個新的陣列 idAndTitlePairs，這個轉換的過程其實就是兩件事

遍歷 newCourseList 所有的元素
把每個元素的預期值給到新的陣列

把這個過程抽象化成一個方法 map，以下是簡化的基本思路：

我們會讓每個陣列都有一個 map 方法
這個方法會讓使用者自訂傳入一個 callback function
這個 callback function 會回傳使用者預期的元素

雖然 ES5 之後原生的 JavaScript 陣列有 map 方法了，但希望讀者自我實做一次，能幫助理解。

// 我們希望每一個陣列都有 map 這個方法，所以我們在 Array.prototype 擴充 map function
Array.prototype.map = function(callback) {
  var result = []; // map 最後一定會返回一個新陣列，所以我們先宣告一個新陣列
  
  this.forEach(function(element, index) {
	  // this 就是呼叫 map 的陣列
	  result.push(callback(element, index));
	  // 執行使用者定義的 callback， callback 會回傳使用者預期的元素，所以我們把它 push 進新陣列
  })
  
  return result;
}

這裡用到了 JavaScript 的 prototype chain 以及 this 等觀念，可以看此影片了解！

到這裡我們就實作完成 map 的方法了，讓我們來試試這個方法吧！

var idAndTitle = newCourseList
                 .map((course) => {
                     return { id: course.id, title: course.title };
                 });

可以看到我們的程式碼更加的簡潔！

Filter

如果我們希望過濾一個陣列，留下陣列中我們想要的元素，並產生一個新的陣列，要怎麼做呢？
先讓我們用 forEach 完成！

讓我們過濾出 rating 值是 5 的元素

var ratingIsFive = [];

newCourseList.forEach((course) => {
	if(course.rating === 5) {
		ratingIsFive.push(course);
	}
});

同樣的我們試著來簡化這個過程，首先在這個轉換的過程中，我們做了兩件事：

遍歷 newCourseList 中的所有元素
判斷元素是否符合條件，符合則加到新的陣列中

Array.prototype.filter = function(callback) {
	var result = [];
	this.forEach((item, index) => {
		if(callback(item, index))
			result.push(item);
	});
	return result;
}

試試這個方法

var ratingIsFive = newCourseList
                   .filter((course) => course.rating === 5);

會發現我們的程式碼又變簡單了，接著我們試著把 filter, map 串起來。

如果我想要取出所有 rating 是 5 的所有 course title

var ratingIsFive = newCourseList
                   .filter((course) => course.rating === 5)
                   .map(course => course.title);

ConcatAll

有時候我們會遇到組出一個二維陣列，但我們希望陣列是一維的，問題如下：

假如我們要取出 courseLists 中所有 rating 為 5 的課程，這時可能就會用到兩個 forEach

var user = {
  id: 888,
  name: 'JerryHong',
  courseLists: [{
    "name": "My Courses",
    "courses": [{
      "id": 511019,
      "title": "React for Beginners",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ id: 1, name: "JavaScript" }],
      "rating": 5
    }, {
      "id": 511020,
      "title": "Front-End automat workflow",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ "id": 2, "name": "gulp" }, { "id": 3, "name": "webpack" }],
      "rating": 4
    }]
  }, {
    "name": "New Release",
    "courses": [{
      "id": 511022,
      "title": "Vue2 for Beginners",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ id: 1, name: "JavaScript" }],
      "rating": 5
    }, {
      "id": 511023,
      "title": "Angular2 for Beginners",
      "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
      "tags": [{ id: 1, name: "JavaScript" }],
      "rating": 4
    }]
  }]
};

var allCourseIds = [];

user.courseLists.forEach(list => {
  list.courses
    .filter(item => item.rating === 5)
    .forEach(item => {
      allCourseIds.push(item)
    })
})

可以看到上面的程式碼，我們用了較為低階的操作來解決這個問題，我們剛剛已經試著用抽象化的方式實作了 map 跟 filter，那我們同樣也能夠定義一個方法用來攤平二維陣列。

讓我們來加入一個 concatAll 方法來簡化這段程式碼吧！
concatAll 要做的事情很簡單，就是把一個二維陣列轉成一維。

Array.prototype.concatAll = function() {
  var result = [];
  
  // 用 apply 完成
  this.forEach((array) => {
    result.push.apply(result, array);
  });

  // 用兩個 forEach 完成
  // this.forEach((array) => {
  //   array.forEach(item => {
  //     result.push(item)
  //   })
  // });
  
  // 用 ES6 spread 完成
  // this.forEach((array) => {
  //   result.push(...array);
  // })
  
  return result;
};

同樣的我們用前面定要好的 courseLists 來試試 concatAll 吧！

var allCourseIds = user.courseLists.map(list => {
	return list.courses.filter(course => course.rating === 5)
}).concatAll()

這邊出一個比較難的題目，大家可以想想看要怎麼解

var courseLists = [{
  "name": "My Courses",
  "courses": [{
    "id": 511019,
    "title": "React for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/tech"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/tech"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/tech"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }, {
    "id": 511020,
    "title": "Front-End automat workflow",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/arch"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/arch"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/arch"
    }],
    "tags": [{
      "id": 2,
      "name": "gulp"
    }, {
      "id": 3,
      "name": "webpack"
    }],
    "rating": 5
  }]
}, {
  "name": "New Release",
  "courses": [{
    "id": 511022,
    "title": "Vue2 for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/nature"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/nature"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/nature"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }, {
    "id": 511023,
    "title": "Angular2 for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/people"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/people"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/people"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }]
}];

/* 
var result = courseList
不得直接使用索引 covers[0]，請用 concatAll, map, filter, forEach 完成
result 結果為 [
    {
      id: 511019,
      title: "React for Beginners",
      cover: "http://placeimg.com/150/200/tech"
    }, {
      id: 511020,
      title: "Front-End automat workflow",
      cover: "http://placeimg.com/150/200/arch"
    }, {
      id: 511022,
      title: "Vue2 for Beginners",
      cover: "http://placeimg.com/150/200/nature"
    }, {
      id: 511023,
      title: "Angular2 for Beginners",
      cover: "http://placeimg.com/150/200/people"
    },
 ]
*/

練習連結： JSBin | JSFiddle

這題有點難，大家可以想想看，我把答案寫在這裡了！

如果大家還想做更多的練習可以到這個連結：http://reactivex.io/learnrx/

這個連結是 Jafar 大神為他的 RxJS workshop 所做的練習網站！

今日小結

今天講了 FP 操作陣列的三個通用函式 forEach, map, filter，以及我們自己定義的一個方法叫 concatAll。這幾天我們把學習 RxJS 的前置觀念跟知識基本上都講完了，明天我們就開始進入 RxJS 的重點核心 Observable 囉！

30 天精通 RxJS (02)： Functional Programming 基本觀念

30 天精通 RxJS (04)：什麼是 Observable ?

系列文

30 天精通 RxJS 共 30 篇

RSS系列文訂閱系列文

552 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

8 則留言

feng619

iT邦新手 5 級 ‧ 2016-12-20 15:14:08

影片最後的 getMousePosition 蠻有趣的
期待介紹 Observable 時可以聽到更多XD

回應 2
檢舉

JerryHong iT邦新手 5 級 ‧ 2016-12-20 15:16:46 檢舉

恩恩我們之後講到 Observable Operators 的時候，會帶很多範例，其中有一個就是拖拉喔：）

eguitarz iT邦新手 5 級 ‧ 2017-01-06 14:17:14 檢舉

(deleted)

登入發表回應

eguitarz

iT邦新手 5 級 ‧ 2017-01-07 09:22:26

其實可以用 reduce 取代 concatAll

let input = [[1], [2, 3], [4]];
let result = input.reduce((arr, current) => arr.concat(current));
console.log('result', result)

"result"
[1, 2, 3, 4]

回應 1
檢舉

JerryHong iT邦新手 5 級 ‧ 2017-01-07 17:01:19 檢舉

會特別實作 concatAll 是有原因的，在後面的文章就會看到：）

登入發表回應

shinypichu88

iT邦新手 5 級 ‧ 2017-01-15 23:31:01

Array.prototype.filter有bug

    result.push(item);

回應
檢舉

登入發表回應

pjchender

iT邦新手 3 級 ‧ 2017-04-08 00:35:40

好精彩的文章阿！做完就感覺的到 expression 和 statment 的差異了！

回應 1
檢舉

lioff iT邦新手 5 級 ‧ 2018-03-07 11:09:59 檢舉

var res = courseLists.map(item => {
    return item.courses.filter( (course) => course.id == 511019 || course.id == 511020 ||  course.id == 511022  );
}).concatAll().map( item => { 
   var url;
   item.covers.forEach((t,i) => {
        if(i ===0 ) { return url = t.url }
    });
    return  {id :item.id , title :item.title, cover: url };
});
console.log(res);

请大神指点一二是否还有更好的方法

登入發表回應

newhandfun

iT邦新手 5 級 ‧ 2018-08-08 11:03:51

我的程式碼～

function imageSizeFilter(w,h,img){
  return img.width==w&&img.height;
}

var newArr = courseLists.map(
  (list)=> {
  //這題看起來直接抓courses的值就可以了，不用filter?
    var result = list.courses.map
    (
      (course)=>
      {
      //感受到filter的強大。不過美中不足的是就算只有取到一個值還是陣列，必須得[0]
        var item = {id:course.id,title:course.title,cover:course.covers.filter(cover=>imageSizeFilter(150,200,cover))[0].url};
        return item;
      }
    );
    return result;
  }).concatAll();
console.log(newArr);

回應 1
檢舉

JerryHong iT邦新手 5 級 ‧ 2019-04-16 00:59:57 檢舉

不能用 [0] 喔

登入發表回應

icerkure

iT邦新手 5 級 ‧ 2018-10-01 14:28:04

	var courses = [];
	courseLists.forEach((item)=> courses.push(item.courses));
	courses = courses.concatAll();
	courses = courses.map(item =>{
	  return {
	    id : item.id,
	    title: item.title,
	    cover: item.covers.filter((sub)=> {
	      if(sub.url.indexOf('150')!=-1){ 
	        return sub.url
	      }    
	    }).map(sub=>sub.url).join('')
	  };  
	})
	console.log( courses );

回應 1
檢舉

JerryHong iT邦新手 5 級 ‧ 2019-04-16 00:58:56 檢舉

第一個 forEach 可以改用 map

登入發表回應

zououour

iT邦新手 5 級 ‧ 2018-10-08 12:22:09

let r = courseLists.map(courseItems => {
        let result = [];
        courseItems.courses.forEach(course => {
                result.push(
                    {
                        id: course.id,
                        title: course.title,
                        cover: course.covers.filter(
                            (cover, index) => {
                                return index === 0;
                            }
                        )[0].url
                    })
            });
        return result;
        }
    ).concatAll();

console.log(r);

不知是否符合要求?

回應 1
檢舉

JerryHong iT邦新手 5 級 ‧ 2019-04-16 00:58:11 檢舉

不能用 [0]

登入發表回應

JerryHong

iT邦新手 5 級 ‧ 2019-05-09 15:06:22

本篇文章搬家囉！這裡不再回覆留言，請移至 https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-03/

回應
檢舉

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22199 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

30 天精通 RxJS系列 第 4 篇